<template>
    <div class="container question-page">
        <div class="question-div">
            <img class="img-bg" src="../../assets/images/question/bg.png" />
            <img class="title-icon" src="../../assets/images/question/title.png" />

            <div class="content">
                <p class="title-txt">{{(questionIndex + 1) +'. ' + question.title}}</p>
                <div
                    :class="'answer-txt ' + (answerActiveIndex == index ? 'active' : '')"
                    v-for="(answer, index) in question.answer"
                    @click="onAnswerHandler(index, answer)"
                    :key="index">
                        {{answer.content}}
                </div>
            </div>

            <div class="page-number">{{questionIndex+1}}</div>

            <img v-if="roleIndex == 1" class="role-icon" src="../../assets/images/question/1.png" />
            <img v-else-if="roleIndex == 2" class="role-icon" src="../../assets/images/question/2.png" />
            <img v-else class="role-icon" src="../../assets/images/question/3.png" />
        </div>

    </div>
</template>
<script>

export default {
    data() {
        return {
            isClick: false,
            totalScore: 0,
            roleIndex: 1,

            answerActiveIndex: -1,

            questionIndex: 0,
            question: {
                title: "",
                answer: []
            }
        }
    },

    mounted() {
        this.initQuestion(0)
    },

    methods: {
        initQuestion(index) {
            this.questionIndex = index;
            this.question = QuestionList[index];

            this.isClick = false;
            this.answerActiveIndex = -1;
            this.roleIndex = (this.roleIndex+1)%3;
        },

        onAnswerHandler(index, answer) {
            if(this.isClick == true) return;
            console.log(answer.score)
            this.isClick = true;
            this.totalScore += answer.score
            this.answerActiveIndex = index;

            if(this.questionIndex >= QuestionList.length-1) {
                this.$router.push("/result?score="+this.totalScore)
            }else {
                setTimeout(() => {
                    this.initQuestion(this.questionIndex+1)
                }, 200);
            }
        },

    }

}
</script>

<style lang="less" scoped>
.question-page {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    padding-top: 160px;

    .question-div {
        width: 100%;
        height: 100%;
        position: relative;

        img {
            display: block;
        }

        .img-bg{
            position: absolute;
            width: 100%;
            height: 100%;
        }

        .title-icon {
            position: absolute;
            width: 832px;
            height: 198px;
            top: -112px;
            left: 94px;
        }

        .content {
            position: absolute;
            top: 140px;
            padding: 0 120px;

            .title-txt {
                font-size: 58px;
                color: #000;
                line-height: 70px;
            }

            .answer-txt {
                font-size: 46px;
                color: #000;
                margin-top: 50px;
                min-height: 119px;
                display: flex;
                align-items: center;
                line-height: 56px;

                &.active {
                    background: url('../../assets/images/question/selected.png') no-repeat center;
                    background-size: 755px 119px;
                }
            }
        }

        .page-number {
            position: absolute;
            bottom: 10.1%;
            width: 96px;
            height: 96px;
            background: url('../../assets/images/question/icon.png') no-repeat center;
            background-size: 100%;
            text-align: center;
            line-height: 96px;
            left: 477px;
            font-size: 36px;
            color: #fff;
        }

        .role-icon {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 458px;
        }
    }
}
</style>



